<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        #dialog{
            font-size: 12px;
            margin-left: 15px;
            margin-top: 20px;
        }
        .pwd2{
            margin: 10px 0;
        }
        /*表单按钮*/
        .sub{
            margin-left: 255px;
            margin-top: 20px;
        }
        .btn{
            width: 50px;
            height: 30px;
            line-height: 30px;
            background: #dddddd;
            border: none;
            border-radius: 3px;
            margin-top: 20px;
        }
        .btn:hover{
            cursor: pointer;
        }
        #confirm{
            margin-right: 10px;
            background: #2E8DED;
            color: #ffffff;
        }
        .error{
            color:red;
        }
        #update-succ{
            display: none;
            width: 469px;
            height: 153px;
            text-align: center;
        }
        #update-succ span{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            color: #2D8CEC;
            margin-top: 56px;
        }
    </style>
</head>
<body class="my-style">
<div id="dialog">
    <div id="update-succ">
        <span>修改成功！</span>
    </div>
    <form method="post" id="myForm">
        <div class="form-group pwd1">
            <label for="pwd1">请输入旧密码:</label>
            <input type="password"  name="pwd1" id="pwd1" class="upwd" value=""/>
        </div>
        <div class="form-group pwd2">
            <label for="pwd2">请输入新密码:</label>
            <input type="password"  name="pwd2" id="pwd2" class="upwd" value=""/>
        </div>
        <div class="form-group pwd3">
            <label for="pwd3">再次输入密码:</label>
            <input type="password" name="pwd3" id="pwd3" class="upwd" value="">
        </div>
        <div class="form-group sub">
            <button id="confirm"  type="button" class="btn">确认</button>
            <button id="cancel" type="button" class="btn" >取消</button>
        </div>
    </form>
</div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
    $('#cancel').click(function(){
//        parent.$("#dialog").hide();
//        window.parent.window.$.layer.close();
//        window.opener.location.href='<%=WEBPATH%>/order/receivetomailList';
    });
    $.extend($.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: $.validator.format("密码长度6-20位"),
        range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: $.validator.format("请输入一个最大为 {0} 的值"),
        min: $.validator.format("请输入一个最小为 {0} 的值")
    });
    jQuery.validator.addMethod("isupwd", function(value, element) {
        var pwd = /^([0-9a-zA-Z])+$/;
        return this.optional(element) || (pwd.test(value));
    }, "请输入0-9a-zA-Z正确的密码");
    //编写表单验证函数validform，在验证按钮确定按钮点击事件内调用验证函数对象
    function validform(){
        return $("#myForm").validate({
            errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
            },
//            onfocusout: function(element) { $(element).valid();
//
//            },
//            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
//                ajaxSubmitForm();
//            //这是关键的语句，配置这个参数后表单不会自动提交，验证通过之后会去调用的方法
//            },

            rules:{
                pwd1:{
                    required:true,
                    rangelength:[6,20],
                    remote: {
                        url: "",     //后台处理程序
                        type: "post",               //数据发送方式
                        dataType: "json",           //接受数据格式
                        data: {                     //要传递的数据
                            pwd1: function() {
                                return $("#pwd1").val();
                            }
                        },
                        success:function(){

                        }
                    },
                    isupwd:true
                },
                pwd2:{
                    required:true,
                    rangelength:[6,20],
                    isupwd:true
                },
               pwd3:{
                   equalTo:"#pwd2",
                    required:true,
                    rangelength:[6,20],
                    isupwd:true
                }
//                confirm_password:{
//
//                }
            },
            messages:{
                pwd1:{
                    required:"旧密码不能为空",
//                    rangelength:jQuery.format("用户名位数必须在{6}到{20}个字符之间！"),
                    remote:"旧密码输入错误，请重新输入"
                },
                pwd2:{
                    required:"密码不能为空",
//                    rangelength:jQuery.format("用户名位数必须在{6}到{20}个字符之间！"),
                    isupwd:"请输入0-9a-zA-Z之间的字母或数字"
                },
                pwd3:{
                    equalTo: "请再次输入相同的密码",
                    required: "密码不能为空",
//                    rangelength:jQuery.format("用户名位数必须在{6}到{20}个字符之间！"),
                    isupwd:"请输入0-9a-zA-Z之间的字母或数字"
                }
            }
        });
    }
    $(validform());
    $("#confirm").click(function(){
        if(validform().form()) {
            $('#myForm').hide();
            $("#update-succ").css("display","block");
            window.close();
        } else {
            //校验不通过，什么都不用做，校验信息已经正常显示在表单上
        }
    });
    function ajaxSubmitForm() {
        var  data=$("#pwd2").serialize();
        console.log(data);
        var url = "/jajax/saveForm.do";
        $.ajax({
            type: "post",
            cache: false,
            dataType: "json",
            url: url,
            data: para,
            beforeSend: function (XMLHttpRequest) {
                //do something before submit...
            },
            success: function (data, textStatus) {
                //do something after submited...
//                $('#confirm').click(function(){
//                    alert('更新成功');
//                    window.close();
//                })
            },
            complete: function (XMLHttpRequest, textStatus) {
                //do something in the end...
            }
        })
    }

</script>
</body>
</html>